<template>
    <!-- 证件认证 -->
    <div class="certificateauth gerenshenhe">
        <pagetitle></pagetitle>
        <!-- {{ pageData }} -->
        <el-card class="sectionCard">
            <el-form ref="formRef" v-if="pageData" :model="pageData" disabled label-position="right" label-width="130px" class="demo-ruleForm">
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">申请认证个人</span>
                    </div>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="pageData.nickName" class="certificateInput" placeholder="申请人的姓名" />
                    </el-form-item>
                    <el-form-item label="证件号码：">
                        <el-input v-model="pageData.idNum" class="certificateInput" placeholder="申请人的中华人民共和国居民身份证号码" />
                    </el-form-item>
                </div>
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">个人常住或服务地址</span>
                    </div>
                    <el-form-item label="常驻地址：">
                        <div>
                            <addRess :value="pageData.addressArea ? pageData.addressArea.keyText : ''" :getAreaData="getAreaData"></addRess>
                            <div class="addressinput">
                                <el-input v-model="pageData.address" class="certificateInput" placeholder="请输入具体的组、社、地名等信息" />
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <div class="userMsgBox">
                    <div class="userMsgTitle">
                        <span class="stitle">个人身份证件</span>
                    </div>
                    <el-form-item label="">
                        <div>
                            <div class="uploadcertificate">
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">居民身份证正面照片</div>
                                    <uploadFile :fileUrl="pageData.idFront" text="" @callBack="uploadFiles" tableItem="idFront" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">居民身份证反面照片</div>
                                    <uploadFile :fileUrl="pageData.idBack" text="" @callBack="uploadFiles" tableItem="idBack" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                                <div class="uploadcertificateItem">
                                    <div class="uploadcertificateTitle">手持居民身份证正面照片</div>
                                    <uploadFile :fileUrl="pageData.idInHand" text="" @callBack="uploadFiles" tableItem="idInHand" width="240px" height="150px" :showIcon="false"></uploadFile>
                                </div>
                            </div>
                            <div class="certificateInputTip" style="font-style: 12px">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                            <div class="certificateInputTip" style="font-style: 12px">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水印；但不能遮挡关键信息，例如姓名、证件号。</div>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <div class="hr"></div>
                        <div class="pageBtns">
                            <el-button type="primary" plain round @click="router.back()">返回</el-button>
                            <el-button type="primary" plain round @click="dialogVisible = true">认证通过</el-button>
                            <el-button type="primary" plain round @click="dialogVisible1 = true">认证不通过</el-button>
                        </div>
                    </el-form-item> -->
                </div>
            </el-form>
            <div class="subpageBtnBox">
                <sxnfbtn @click="router.back()">返回</sxnfbtn>
                <sxnfbtn v-if="route.query.certified == '1'" plain @click="pass">认证通过</sxnfbtn>
                <sxnfbtn v-if="route.query.certified == '1'" plain @click="dialogVisible1 = true">认证不通过</sxnfbtn>
            </div>
        </el-card>
        <!-- 认证通过 -->
        <!-- <el-dialog v-model="dialogVisible" title="个人认证 审核通过" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <el-icon color="#23b14d" size="48px"><CircleCheckFilled /></el-icon>
                <div class="dialogCentertext">
                    个人认证 申请平台审核 <span>已经通过</span>
                    <p>您审核通过<span> szfarm </span>个人认证审核，开通个人功能</p>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain @click="dialogVisible = false">发送消息</el-button>
                    <el-button type="primary" plain @click="dialogVisible = false"> 返回 </el-button>
                </span>
            </template>
        </el-dialog> -->
        <div class="submitsuccessfully" v-if="dialogVisible">
            <div class="contMsg">
                <div class="title">个人认证 审核通过</div>
                <img src="../../../assets/images/success.png" alt="" srcset="" />
                <div class="success">个人认证 申请平台审核 <span>已经通过</span></div>
                <div class="tipcg">
                    您审核通过的<span>{{ pageData.nickName }}</span> 个人认证审核，开通个人功能。
                </div>
                <div class="btnbox">
                    <sxnfbtn @click="pageToBack">发送信息</sxnfbtn>
                    <sxnfbtn @click="pageToBack">知道了</sxnfbtn>
                </div>
            </div>
        </div>
        <!-- 认证不通过 -->
        <!-- <el-dialog v-model="dialogVisible1" title="消 息" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <div class="dialogCentercheckbox">
                    <div class="dialogCentertitle">在 个人认证 过程中，因为您提供的：</div>
                    <div class="dialogCentercheckboxItem">
                        <el-checkbox v-model="pageData.checked1" label="证件模糊；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="证件号码与输入号码不一致；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="无法确认是否本人手持证件照；" /><br />
                        <el-checkbox v-model="pageData.checked1"> <input type="text" class="dialogInput" placeholder="请输入其他原因" />。 </el-checkbox>
                    </div>
                    <div class="dialogCenterTip">造成 <span>个人实名认证</span> 未能通过，请核实后再提交申请。</div>
                </div>
            </div>
            <template #footer>
                <div class="btnbox">
                    <div class="btnzdl sty2" @click="dialogVisible1 = false">认证不通过</div>
                    <div class="btnzdl sty2" @click="dialogVisible1 = false">取消</div>
                </div>
            </template>
        </el-dialog> -->
        <div class="submitsuccessfully" v-if="dialogVisible1">
            <div class="contMsg">
                <div class="title" style="margin: 28px 0">消息</div>
                <div class="dialogCentertitle">在 个人认证 过程中，因为您提供的：</div>
                <div class="dialogCentercheckboxItem">
                    <div v-for="(item, index) in failMsg" :key="index">
                        <el-checkbox v-if="item.label" v-model="item.checked" size="default" :label="item.label" />
                        <input v-else type="text" v-model="item.text" class="dialogInput" placeholder="请输入其他原因" />
                    </div>
                </div>
                <div class="dialogCenterTip">造成 <span>个人实名认证</span> 未能通过，请核实后再提交申请。</div>
                <div class="btnbox" style="margin-top: 30px">
                    <sxnfbtn @click="fail">认证不通过</sxnfbtn>
                    <sxnfbtn @click="dialogVisible1 = false">取消</sxnfbtn>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { getAuditUserInfo, passTheAudits, failTheAudits } from "@/api/publicmanagement";
const router = useRouter();
const route = useRoute();
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
// const cardTypeIndex: any = ref("");
const failMsg: any = ref([
    {
        label: "证件模糊；",
        checked: false,
    },
    {
        label: "证件号码与输入号码不一致；",
        checked: false,
    },
    {
        label: "信息录入不完整；",
        checked: false,
    },
    {
        label: "无法确认是否本人手持证件照；",
        checked: false,
    },
    {
        label: "",
        text: "",
    },
]);
// const cardType = ref(["中国大陆居民身份证", "护照", "居住证"]);
let pageData: any = reactive({
    address: "",
    addressArea: "",
    bizUserIdList: "",
    certified: "",
    createTime: "",
    idBack: "",
    idFront: "",
    idInHand: "",
    idNum: "",
    idType: 0,
    mainTeam: "",
    name: "",
    nickName: "",
    phoneNum: "",
    pic: null,
    status: 1,
    updateTime: "",
    userId: "",
});

const getPageData = () => {
    getAuditUserInfo({
        userId: route.query.id,
    }).then((res: any) => {
        let data = res.data;
        pageData.address = data.address;
        pageData.addressArea = data.addressArea;
        pageData.idBack = data.idBack;
        pageData.idFront = data.idFront;
        pageData.idInHand = data.idInHand;
        pageData.nickName = data.nickName;
        pageData.idNum = data.idNum;

        if (pageData.addressArea && typeof pageData.addressArea == "string") {
            pageData.addressArea = JSON.parse(pageData.addressArea);
        }
        console.log(pageData);
    });
};
getPageData();

// 文件上传回调
const uploadFiles = (path: string, doc: string) => {
    console.log(path, doc);
    pageData[doc] = path;
};

// 选择地址回调
const getAreaData = (data: any) => {
    pageData.addressArea = data;
};
const pageToBack = () => {
    router.back();
};
// 审核通过
const pass = () => {
    passTheAudits({
        userIds: [route.query.id],
    }).then((res: any) => {
        ElMessage.success("操作成功");
        dialogVisible.value = true;
    });
};
// 审核不通过
const fail = () => {
    let msg = "";
    failMsg.value.forEach((v: any) => {
        if (v.checked) {
            msg += v.label;
        }
        if (v.text) {
            msg += v.text;
        }
    });
    failTheAudits({
        userIds: [route.query.id],
        reason: msg,
    }).then((res: any) => {
        dialogVisible1.value = true;
        ElMessage.success("操作成功");
        setTimeout(() => {
            pageToBack();
        }, 300);
    });
};
</script>
<style lang="scss" scoped>
.sectionCard {
    margin-bottom: 20px;
    .userMsgBox {
        border-bottom: 1px solid #cccccc;
        margin-bottom: 30px;
        &:last-child {
            border: none;
        }
        .userMsgTitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            .stitle {
                font-size: 14px;
                font-weight: bold;
                color: #252b3a;
                margin-right: 10px;
            }
            .stip {
                padding: 3px 10px;
                background: #f1f1f1;
                border-radius: 4px 4px 4px 0px;
                font-size: 10px;
                color: #252b3a;
                margin-left: 5px;
            }
        }
        .certificateInput {
            width: 500px;
        }
        .certificateInputTip {
            margin-left: 10px;
            font-size: 12px;
            color: #999999;
        }
        .addressinput {
            margin-top: 10px;
        }
        .uploadcertificate {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            margin-bottom: 10px;
            .uploadcertificateItem {
                margin-right: 30px;
                background-repeat: no-repeat;
                background-size: 154px 97px;
                background-position: 50% 70%;
                &:nth-child(1) {
                    background-image: url(@/assets/image/card2.png);
                }
                &:nth-child(2) {
                    background-image: url(@/assets/image/card1.png);
                }
                &:nth-child(3) {
                    background-image: url(@/assets/image/card3.png);
                }
                .uploadcertificateTitle {
                    text-align: center;
                    font-size: 14px;
                    color: #666666;
                    margin-bottom: 10px;
                }
            }
        }
    }
    // .pageBtns {
    //     padding-left: 130px;
    // }
    .hr {
        width: 100%;
        height: 1px;
        border: 1px dashed #cccccc;
        margin-bottom: 22px;
    }
    .subpageBtnBox {
        font-size: 14px;
        padding-left: 130px;
    }
}
.dialogCenter {
    text-align: center;
    .dialogCentertext {
        margin-top: 20px;
        font-size: 16px;
        span {
            color: #ff0000;
        }
        p {
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .dialogCentertitle {
        font-size: 14px;
        margin-bottom: 20px;
        text-align: left;
    }
    .dialogCentercheckbox {
        width: 444px;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .dialogCentercheckboxItem {
            // height: 188px;
            // border: 1px solid #cccccc;
            margin-bottom: 10px;
            text-align: left;
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom: 20px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 5px 5px 5px 5px;
            .dialogInput {
                background: none;
                border: none;
                border-bottom: 1px solid #cccccc;
                width: 330px;
            }
        }
        .dialogCenterTip {
            text-align: left;
            color: #666666;
            font-size: 14px;
            span {
                color: #333333;
            }
        }
    }
}
.submitsuccessfully {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.1);
    z-index: 999;
    .contMsg {
        width: 655px;
        height: 469px;
        background: #ffffff;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: scale(0.7);
        .title {
            text-align: center;
            margin-top: 57px;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
        }
        img {
            width: 80px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 38px;
        }
        .success {
            font-weight: normal;
            font-size: 20px;
            color: #333333;
            margin-top: 38px;
            text-align: center;
            span {
                color: #ff0000;
            }
        }
        .tipcg {
            font-size: 16px;
            color: #999999;
            text-align: center;
            margin-top: 24px;
            padding: 0;
            span {
                color: #ff0000;
            }
        }
        .btnbox {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 68px;
            .btnzdl {
                width: 119px;
                height: 47px;
                text-align: center;
                line-height: 47px;
                cursor: pointer;
                font-size: 20px;
                color: #ffffff;
                margin: 0 10px;
            }
            .sty1 {
                background: #299c37;
            }
            .sty2 {
                background: rgba(0, 0, 0, 0.05);
                color: #333333;
            }
        }
        .dialogCentertitle {
            font-size: 20px;
            color: #666666;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 449px;
        }
        .dialogCentercheckboxItem {
            background: rgba(0, 0, 0, 0.02);
            border-radius: 5px;
            width: 449px;
            height: 197px;
            font-size: 16px;
            padding: 20px;
            margin: 16px 0;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            .dialogInput {
                background: none;
                border: none;
                border-bottom: 1px solid #cccccc;
                width: 330px;
            }
        }
        .dialogCenterTip {
            font-size: 20px;
            color: #666666;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 449px;
            white-space: nowrap;
        }
    }
}
.btnbox {
    display: flex;
    justify-content: center;
    align-items: center;
    .btnzdl {
        width: 97px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
        font-size: 14px;
        color: #ffffff;
        margin: 0 10px;
    }
    .sty1 {
        background: #299c37;
    }
    .sty2 {
        background: rgba(0, 0, 0, 0.05);
        color: #333333;
    }
}
</style>
<style>
.gerenshenhe .dialogCentercheckboxItem .el-checkbox__label {
    font-size: 16px !important;
}
</style>
